<template>
	<view>
		<view class="pop_content" :hidden='videoplay'>
			<image class="return_button J_ClosePop" @tap='videoClose' :src="close" mode=""></image>
			<view class="article_content">
				<video id="myVideo" :hidden='videoplay' :src="poster" :controls='controls' loop="true" :autoplay="autoplay"></video>
			</view>
			<view class="window_body" @touchmove.stop.prevent="moveHandle"></view>
			<view class="landscape">
				横屏体验更佳
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				videoplay: true,
				autoplay: false,
				video: '',
				controls: false,
				close: 'https://www.frisobaby.com/resources/images/mobile/close_btn.png'
			};
		},
		onLoad() {

		},
		props: ['poster'],
		onShow() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			videoClick: function(e) {
				this.autoplay = true;
				this.videoplay = false;
				this.controls = true;
				this.videoContext.play()
			},
			videoClose: function() {
				this.autoplay = false;
				this.videoplay = true;
				this.controls = false;
				this.videoContext.pause()
			}
		},

	}
</script>

<style>
	.landscape {
		top: 572upx;
		position: absolute;
		width: 100%;
		text-align: right;
		color: #ffffff;
		font-size: 22upx;
		z-index: 999;
		padding-right: 10upx;
		box-sizing: border-box;

	}

	.window_body {
		opacity: 0.5;
		background: #000000;
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.pop_content {
		position: fixed;
		z-index: 100;
		top: 82upx;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.return_button {
		width: 48upx;
		height: 48upx;
		right: 20upx;
		top: 32upx;
		position: absolute;
		z-index: 99999;
	}

	.article_content {
		height: 349upx;
		width: 100%;
		margin: 0 auto;
		color: #004091;
		position: absolute;
		background: #ffffff;
		top: 120upx;
		left: 0;
		z-index: 99999;
	}

	.article_content video {
		width: 100%;
	}
</style>
